import {defineComponent, Transition} from "vue";
import {useSysStatusStore} from "@/stores/modules/status";
import {storeToRefs} from "pinia";
import {EmitNames} from "@/constants/common";
import emitter from "@utils/common/Mitt";
import Wallpaper from "@layouts/base/wallpaper";
import Desktop from "@layouts/base/desktop";
import Launchpad from "@layouts/base/launchpad";
import Lockscreen from "@layouts/base/lockscreen";

/**
 * Home 组件
 * @date 2023/9/25
 */
export default defineComponent({
  name: "HomeView",
  setup() {
    const { isWallpaper, isDeskTop, isLaunchPad, isLockScreen } = storeToRefs(useSysStatusStore());

    emitter.on(EmitNames.LockScreen, (bool: boolean) => {
      isLockScreen.value = bool;
      isWallpaper.value = !bool;
      isDeskTop.value = !bool;
    });

    emitter.on(EmitNames.Launchpad, () => {
      isLaunchPad.value = !isLaunchPad.value;
    });

    return () => (
      <main class="absolute inset-0">
        <Transition name="fade">{isWallpaper.value ? <Wallpaper /> : null}</Transition>
        <Transition name="fade">{isDeskTop.value ? <Desktop /> : null}</Transition>
        <Transition name="fade">{isLaunchPad.value ? <Launchpad /> : null}</Transition>
        <Transition name="fade">{isLockScreen.value ? <Lockscreen /> : null}</Transition>
      </main>
    );
  },
});
